HTML的每個標籤(元素)都是一個Box，因此都由content、padding、border、margin構成。詳細關係如下：

from CSS 盒子模型 | 菜鸟教程

padding

padding: contain到border間的距離。
參數：
padding-top、bottom、left、right: 上下左右的距離設定。
padding: 可輸入4、2、1個數字
4個數字: 上右下左(順時針)
2個數字: 上下、左右
1個數字: 所有方向

margin

margin: border到其他元素的距離。
參數：
margin-top、bottom、left、right: 上下左右的距離設定。
padding: 可輸入4、2、1個數字
4個數字: 上右下左(順時針)
2個數字: 上下、左右
1個數字: 所有方向
要注意的是，margin雖然可以作用在所有的元素上，但margin -top、margin-bottom不會作用在inline 元素。

border

邊界，介於padding和margin之間。
語法:
border: px solid/dashed color

width/height

設定元素的寬、高。

絕對單位：
width跟height可以使用絕對單位設定，像是cm、px(像素)等。
相對單位：
%: 根據parent元素的width、height，依比例設定寬、高。
vw: view width
vh: view height
vw和vh會根據可見視窗的大小作調整。也就是說，若網頁畫面跟螢幕一樣大，則元素就會根據螢幕的寬高調整；若視窗只有螢幕一半大，則元素也會依比例縮小。
跟%最不同的是，vw、vh不是根據母元素，而是視窗大小，因此在使用上仍有不同。

補充: vmin和vmax

另外，還有一個補充的單位是vmin，這個的意思是幫我抓取「長或寬較小的那個的百分比」，另一個相對的就是vmax意思就是抓取「長或寬較大的那個的百分比」。

from [筆記] 好用的css 3新單位vh vw ─ 讓你的圖片可以隨著螢幕大小而不同

display設定

display可以調整HTML元素的顯示狀態，也能調整box的狀態。
若要調整box的狀態，可輸入這三種參數:
inline:
將元素調整成inline，也就是寬度及高度依據content而定，若寬度未超過母元素的寬度，則下一個inline元素會在同行。
inline元素無法調整寬度及高度，margin也僅能調整左右，上下會失去作用，要注意。
block:
將元素調整為block，可適用block的設定。
inline-block:
inline-box是比較特別的狀態，在width和height可以做調整，適用block的設定；在網頁排版上則是inline的設定。預設為inline-block的有<img>、<input>、<button>、<select>、<textarea>這五個。